<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>穿梭框</title>
    <style>
        ul{
            width:100px;
            border:1px solid #ccc;
            height: 200px;
            float: left;
        }

        button{
            float: left;
        }

        .active{
            background-color: red;
            color:white;
        }


    </style>


</head>
<body>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>刘刘</li>
    </ul>
    <button>&gt;&gt;</button><!-- 两个大于号 -->
    <button>&lt;&lt;</button><!-- 两个小于号 --
    <ul id="ul1">
    </ul>    
</body>
<script>
    var myul = document.querySelector('ul'); //获取到第一个ul

    myul.onclick = function(e){ //点击ul 完成事件穿透
        //event.target.id　获取事件触发元素id
        //event.target.className　获取事件触发元素classname
        //event.target.innerHTML　 //获取事件触发元素的内容（li）

        if(e.target.nodeName == 'LI'){ //获取事件触发元素标签名
            e.target.classList.toggle('active'); 
        }
    }

    var btn = document.querySelector('button')

    btn.onclick = function(){
        var liList = document.querySelectorAll('.active');
        for(var i = 0; i< liList.length;i++){
            ul1.appendChild(liList[i]);
        }

    }

    var btn1 = document.querySelector('button').nextElementSibling; //获取到第一个按钮下一个元素节点;

    btn1.onclick = function(){
        var liList1 = document.querySelectorAll('.active');
        for(var i = 0;i < liList1.length;i++){
            myul.appendChild(liList1[i]);
        }

    }
    







</script>
</html>